<template>
  <div class="msg">
    <el-table height="500" :data="tableData" border>
      <el-table-column prop="type" label="类型" align="center"></el-table-column>
      <el-table-column prop="desc" label="修改位置" align="center"></el-table-column>
      <el-table-column label="修改时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.updatedAt | formatDate }}
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination
        small
        background
        :page-count="totalPage"
        layout="prev, pager, next"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { formatDate, api } from '~/assets/utils'
export default {
  data() {
    return {
      tableData: [],
      totalPage: 1
    }
  },
  filters: {
    formatDate(val) {
      return formatDate(val, 'yyyy-MM-dd hh:mm')
    }
  },
  methods: {
    pageChange(page) {
      this.getData(page)
    },
    async getData(page) {
      const res = await this.$axios.get(api.msgList, { params: { page, pageSize: 15 } })
      this.tableData = res.data
      this.totalPage = res.count
    }
  },
  mounted() {
    this.getData(1)
  }
}
</script>

<style lang="scss" scoped>
    .msg{
    width: 350px;
    padding:0 20px;
    text-align: center;
    /deep/ td{
      padding: 5px 0;
    }
    /deep/ .cell{
      font-size: 11px;
    }
    .pager{
      padding: 10px;
    }
  }
</style>
